<template>
	<view>
		<custom-navigation-bar title="合伙人申请"></custom-navigation-bar>
		<view class="main">
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						姓名
					</view>
					<view class="form-item-countent">
						<input type="text" v-model="data.name" class="form-item-input" placeholder="请输入姓名" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view> 
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						身份证号
					</view>
					<view class="form-item-countent">
						<input v-model="data.idCard" type="text" class="form-item-input" placeholder="请输入身份证号"  />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view style="width: 84%;float: left;margin-left: 8%;">
					<uni-file-picker @select="handleIdSelect" @delete="handleIdDelete" limit="2"
						title="请上传身份证反正面照片(最多2张)"></uni-file-picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						性别
					</view>
					<view class="form-item-countent">
						<radio-group @change="updateSex" style="margin-top: 20rpx;">
							<radio value="0" class="custom-radio" checked />男
							<radio value="1" class="custom-radio" />女
						</radio-group>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						电话
					</view>
					<view class="form-item-countent">
						<input type="text" v-model="data.phone" class="form-item-input" placeholder="请输入内容"  />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						申请区域
					</view>
					<view class="form-item-countent">
						<position-picker class="position-picker" @update-region="regionChange"></position-picker>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						类型
					</view>
					<view class="form-item-countent">
						<radio-group @change="updateType" style="margin-top: 20rpx;">
							<radio value="0" class="custom-radio" checked />个人
							<radio value="1" class="custom-radio" />企业
						</radio-group>
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view> 
			
			<view class="form-item" v-if="!isSingle">
				<view class="form-item-1">
					<view class="form-item-lable">
						企业名称
					</view>
					<view class="form-item-countent">
						<input v-model="data.companyName" type="text" class="form-item-input" placeholder="请输入企业名称" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item" v-if="!isSingle">
				<view class="form-item-1">
					<view class="form-item-lable" >
						信用代码
					</view>
					<view class="form-item-countent">
						<input type="text" class="form-item-input" placeholder="请输入信用代码" v-model="data.license" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item" v-if="!isSingle">
				<view style="width: 84%;float: left;margin-left: 8%;">
					<uni-file-picker @select="handleLicenseSelect" @delete="handleLicenseDelete" limit="1"
						title="请上传营业执照(最多1张)"></uni-file-picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						开户行
					</view>
					<view class="form-item-countent">
						<input type="text" v-model="data.bankName" class="form-item-input" placeholder="请输入银行名称" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-1">
					<view class="form-item-lable">
						银行卡号
					</view>
					<view class="form-item-countent">
						<input type="text" v-model="data.bankCard" class="form-item-input" placeholder="请输入银行卡号" @input="updateBankCard" />
					</view>
					<view class="form-item-right">
						<image src="/static/gengduo@3x(1).png" class="form-item-image"></image>
					</view>
				</view>
			</view>
			<view class="form-item" style="border: none;">
				<view class="form-item-1" style="margin-top: 20rpx;font-size: 25rpx;border: none;" >
					<switch type="checkbox" checked="{{xieYiV}}" @change="xieYi"/>同意遵守<label style="color: blue;" @click="xieYiDetail">《城市合伙人合作协议》</label>
				</view>
			</view>
			<view class="form-item" style="margin-top: 50rpx;">
				<view style="width: 84%;float: left;margin-left: 8%;">
					<view class="btn" @click="submit">确定</view>
				</view>
			</view>
			<view style="width: 100%;height: 60rpx;float: left;"></view>
		</view>
	</view>
</template>

<script setup>
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue'
	const xieYiV=ref(false);
	function xieYi(e){
		console.log( e.detail.value);
		xieYiV.value=e.detail.value
	}
	function xieYiDetail(){
		uni.navigateTo({
			url: "/pages/protocol/citypartner"
		});
	}
	import {
		defineComponent
	} from 'vue';
	import http from '../../utils/http';
	import {
		generateApplicationId,
		getCurrentTimestamp,
		generateTime
	} from '../../utils/timeUtils';
	const isSingle = ref(true)
	// 提取字段
	const data = ref({
		userId: getApp().globalData.user.userId,
		name: '', // 姓名
		sex: 0, // 性别
		phone: '', // 电话
		province: '',
		city:"",
		district:"",
		type: 0, // 类型
		idCard: '', // 身份证号 
		companyName: '', // 商户名称
		license: '', // 营业执照编码
		bankName: '', // 开户行
		bankCard: '', // 银行卡号
		idImage: [],
		licenseImage: ""
	});
	const idImage = ref([]); 
	 
	// 申请区域
	function regionChange(e) {
		// console.log("position", e[0] + "-" + e[1] + "-" + e[2])
		// applicationContent.value.region = e[0] + "-" + e[1] + "-" + e[2]
		data.value.province = e[0]
		data.value.city = e[1]
		data.value.district = e[2]
	}
	// 类型
	function updateType(e) {
		if (e.target.value == '1') {
			isSingle.value = false
		} else {
			isSingle.value = true
		}
		data.value.type = e.target.value 
	}
	
	function upload(tempFilePaths,type){
		uni.showLoading({
			title: '图片上传中',
			mask:true
		});
		uni.uploadFile({
			url: getApp().globalData.upLoadUrl,
			filePath: tempFilePaths.path,
			name: 'file', // 文件字段名
			formData: {
				"fileType": "application",
				"fileName": getCurrentTimestamp(),
				"userId": data.value.userId
			},
			success: (uploadRes) => {
				uni.hideLoading();
				console.log(uploadRes.data);
				let jsonData = JSON.parse(uploadRes.data);
				if(jsonData.code==1){
					if(type=='idCard'){
						idImage.value.push(jsonData.data);
					}else{
						data.value.licenseImage=jsonData.data;
					}
				}else{
					uni.showToast({
						title: '图片上传失败',
					    icon:'error',
						duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
					    mask:true
					});
				}
			},
			fail: (error) => {
				uni.hideLoading();
				uni.showToast({
					title: '图片上传失败',
				    icon:'error',
					duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
				    mask:true
				});
			}
		});
	}
 
	//身份证正面照片
	function handleIdSelect(e) {
		const tempFilePaths = e.tempFiles;
		for(var i=0;i<tempFilePaths.length;i++){
			upload(tempFilePaths[i],'idCard');
		} 
	}

	function handleIdDelete(e) {
		console.log("delete", e)
		idImage.value.splice(e.index, 1); // 移除数组中对应的文件
	}
 
	function handleLicenseSelect(e) { 
		const tempFilePaths = e.tempFiles;
		upload(tempFilePaths[0],'license');
	}

	function handleLicenseDelete(e) {
		image.value.licenseImage = ""
	}
  
	async function submit() {
		if(!xieYiV.value){
			uni.showToast({
				icon: 'error',
				title: '请阅读协议'
			})
			return;
		}
		try {   
			data.value.idImage= JSON.stringify(idImage.value); 
			console.log(data.value);
			// 所有上传操作完成后，调用 http.request 
			uni.showLoading({
				title: '提交中',
				mask:true
			});
			
			http.request({
				url: "/X/application/cityPartner",
				method: "POST",
				data: {
					cityPartner: data.value
				}
			}).then((res) => { 
				console.log(res);
				uni.hideLoading();
				if(res.code==1){
					 uni.showToast({ 
					 	title: '申请成功'
					 })
					 wx.switchTab({
					   url: "/pages/my/my",
					   success: function(res) {
					     // 跳转成功
					   },
					   fail: function(err) {
					     // 错误处理
					   }
					 })
				}else if(res.code==0){
					 uni.showToast({
					 	icon: 'error',
					 	title: res.message
					 })
				}else if(res.code==-1){
					uni.navigateTo({
						url: "/pages/login/login"
					});
				}
			}).catch((err) => {
				uni.showToast({
					icon: 'error',
					title: '请求失败'
				})
			}) 
			
		} catch (err) {
			// 在这里处理上传文件过程中的错误
			console.log("上传文件失败", err);
		}
	}

	function test() {
		console.log("test", applicationContent.value)
		console.log("golbal", getApp().globalData.openid)
		console.log("timeUtils", getCurrentTimestamp())
	}
</script>

<style>
	@import "./form.scss";
	Page{
		  background-color: white;
	}
</style>